<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms">
	<head>
		<title>Address Form Aligned Using CSS</title>
		<style type="text/css">
      /* a stylesheet for XForms input field alignment */

@namespace xf url("http://www.w3.org/2002/xforms");

/* give the input form labels and the fieldset legend a bold sans-serif font */
label, legend {
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   font-size: small;
}

/* give the group some breathing room */
xf|group {
	border: black solid 2px;
	padding: 5px;
	margin: 7px;
	width: 260px;
}

/* like fieldset legend */
.box-label {
	position: relative;
	background-color: white;
	color: black;
	padding-right: 3px;
	padding-left: 3px;
	top: -16px;
}

/* the labels are right-aligned in a 150px wide column */
xf|input xf|label {
   width: 150px;
   margin: 3px;
   text-align: right;
}

/* the input values are left aligned */
xf|value {
   text-align: left;
}

/* vertical area between input boxes */
input {
   margin: .2em;        
}

/* each group is our table *.
xf|group {
   display: table;
}

/* each input is a row in the group table */
xf|input {
   display: table-row;
}

/* each label within an input is a cell in the input row */
xf|input xf|label {
   display: table-cell; 
}

/* each value (pseudo-element) is also a cell in the input row */
xf|input::value {
   display: table-cell;
}
</style>
		<xf:model>
			<xf:instance>
				<AddressList xmlns="">
					<Address>
						<LocationStreetFullText>123 Main Street SE</LocationStreetFullText>
						<LocationStreetFullText2>Apartment 123</LocationStreetFullText2>
						<LocationCityName>Anytown</LocationCityName>
						<LocationStateName>Minnesota</LocationStateName>
						<LocationPostalID>55123</LocationPostalID>
					</Address>
					<Address>
						<LocationStreetFullText>234 Main Street SE</LocationStreetFullText>
						<LocationStreetFullText2>Apartment 234</LocationStreetFullText2>
						<LocationCityName>Anytown</LocationCityName>
						<LocationStateName>Minnesota</LocationStateName>
						<LocationPostalID>55234</LocationPostalID>
					</Address>
				</AddressList>
			</xf:instance>
		</xf:model>
	</head>
	<body>
		<xf:repeat nodeset="/AddressList/Address">
			<xf:group>
				<xf:label class="box-label">Mailing Address</xf:label>
				<xf:input ref="LocationStreetFullText">
					<xf:label>Street: </xf:label>
				</xf:input>
				<xf:input ref="LocationStreetFullText2">
					<xf:label />
				</xf:input>
				<xf:input ref="LocationCityName">
					<xf:label>City:</xf:label>
				</xf:input>
				<xf:input ref="LocationStateName">
					<xf:label>State:</xf:label>
				</xf:input>
				<xf:input ref="LocationPostalID">
					<xf:label>Postal Code:</xf:label>
				</xf:input>
			</xf:group>
		</xf:repeat>
	</body>
</html>
